<template>
  <div class="accountMain" style="min-height:700px">
    <div class="account">
      <div class="accountTitle">
        <img src="../../assets/images/account/图层 1000.png" alt />
        <div class="accountTitle_r">
          <p class="name">
            <span>{{ JSON.parse(mainUser).Customer.name }}&nbsp;&nbsp;&nbsp;</span>
            <span>{{assGet.LoginId}}</span>
            账户余额:{{assGet.Balance}} USDT
          </p>
        </div>
      </div>
      <!-- 重置密码 -->
      <!-- <div class="onetwo">
        <div class="forget">
          <div></div>
          <div>银行卡管理</div>
        </div>
       
        <div class="xiugai">
          <div class="xiugai-one">
            <div></div>
            <div>
              <p>银行卡</p>
              <p>用于保护账户安全</p>
            </div>
          </div>
          <div class="xiugai-two">
            <div @click="bangding">绑定</div>
          </div>
        </div>
      </div> -->
      <div class="onetwo">
        <div class="forget">
          <div></div>
          <div>个人认证</div>
        </div>
        <!-- 修改 -->
        <div class="xiugai">
          <div class="xiugai-one">
            <div></div>
            <div>
              <p>身份认证</p>
              <p></p>
            </div>
          </div>
          <div class="xiugai-two">
            <div @click="Authentication">认证</div>
          </div>
        </div>
      </div>
    </div>
    <!-- dialogAuthentication -->
    <el-dialog title="身份认证" :visible.sync="dialogAuthentication" width="35%">
      <!-- <form method="post" enctype="multipart/form-data"> -->
        <div class="twoode">
          <div>正面</div>
          <div class="uploaderFiels">
            <div class="fiels">
              <div class="file-style">
                <img class="head-img" src="../../assets/images/account/zheng.png" ref="idcardFront" />
                <input
                  type="file"
                  name="files"
                  id="fileOne"
                  accept="image/jpg, image/png, image/jpeg"
                  @change="changeOne"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 反面 -->
        <div class="twoode">
          <div>反面</div>
          <div class="uploaderFiels">
            <div class="fiels">
              <div class="file-style">
                <img class="head-img" src="../../assets/images/account/fan.png" ref="idcardBack" />
                <input
                  type="file"
                  name="files"
                  id="fileTwo"
                  accept="image/jpg, image/png, image/jpeg"
                  @change="changeTwo"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 手持身份证 -->
        <!-- <div class="twoode">
          <div>手持身份证</div>
          <div class="uploaderFiels">
            <div class="fiels">
              <div class="file-style">
                <img class="head-img" src="../../assets/images/account/shou.png" ref="idcardHand" />
                <input
                  type="file"
                  name="files"
                  id="fileFree"
                  accept="image/jpg, image/png, image/jpeg"
                  @change="changeFree"
                />
              </div>
            </div>
          </div>
        </div> -->
      <!-- </form> -->
      <div>
        <el-button class="onparin" type="primary" @click="tijiao">提交</el-button>
      </div>
    </el-dialog>
    <!-- 弹出框 -->
    <el-dialog title="绑定银行卡" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
      <div class="twoode">
        <div>手机号</div>
        <el-input style="margin-top:10px" v-model="user.Customer.loginId" placeholder></el-input>
      </div>
      <div class="twoode">
        <div>开户银行</div>
        <el-input style="margin-top:10px" v-model="Bank" placeholder="请输入开户银行"></el-input>
      </div>
      <div class="twoode">
        <div>银行卡号</div>
        <el-input style="margin-top:10px" v-model="CardNo" placeholder="请输入银行卡号"></el-input>
      </div>
      <div class="twoode">
        <div>姓名</div>
        <el-input style="margin-top:10px" v-model="CardNo" placeholder="请输入姓名"></el-input>
      </div>
      <div class="twoode">
        <div>验证码</div>
        <div style>
          <el-input :placeholder="$t('message.getthe')" v-model="VCode" class="input-with-select">
            <el-button v-show="show" slot="append" type="primary">{{$t('message.Getcode')}}</el-button>
            <el-button v-show="!show" slot="append" type="primary">{{count}} s{{$t('message.Try')}}</el-button>
          </el-input>
        </div>
      </div>
      <div>
        <el-button class="onparin" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { binding, bindingCode, accountGet, setRenZhenImg } from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogAuthentication: false,
      Bank: "", //银行
      CardNo: "", //银行卡号
      Name: "", //姓名
      VCode: "", //验证码
      show: true,
      count: "",
      timer: null,
      assGet: [],
      imageUrl: "",
      picList: []
    };
  },
  created() {
    
  },

  computed: {
     ...mapState(["user","mainUser"]),
    lang() {
      return window.localStorage.getItem("lang");
    },
    
  },
  mounted() {},
  created() {
    this.information();
  },
  methods: {
    changeOne(event) {
      let that = this;
      let imgFile = $(that.$el).find("#fileOne")[0].files[0]; //取到上传的图片
      // var imgurl = getObjectURL(imgFile) ;
      var lookImgSrc = URL.createObjectURL(imgFile);
      let formData = new FormData(); //通过formdata上传
      console.log(imgFile,321321)
      formData.append("imgFile", imgFile);
      formData.append("loginId", JSON.parse(this.mainUser).Customer.loginId);
      formData.append("type", "front");
      $.ajax({
        url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg',
        header: {
		     		'content-type': 'application/json', //自定义请求头信息
	 		}, 
        contentType: 'application/json',
	 	  	dataType:'JSON',
        type: 'POST', //GET
        data: formData,
        contentType: false,
         processData: false,
        beforeSend: function (xhr) {},
        success: (res) => {
          console.log(res)
          if (res.ResultCD == "I001") {         

            that.$refs.idcardFront.src =lookImgSrc; // 我要赋值data里面的 我上传的图片
            console.log( that.$refs.idcardFront.src,3333)
          }else {
            alert(res.ErrorMsg);
          }
        },
        error: (ros) => {
          alert(ros.ErrorMsg);
        }
      })
    },
   
    // 反面
    changeTwo() {
      let that = this;
      let imgFile = $(that.$el).find("#fileTwo")[0].files[0]; //取到上传的图片
      console.log($(that.$el).find("#fileTwo")[0].files, "正面"); //由打印的可以看到，图片信息就在files[0]里面
      let formData = new FormData(); //通过formdata上传
        var lookImgSrc = URL.createObjectURL(imgFile);
      formData.append("imgFile", imgFile);
      formData.append("loginId", JSON.parse(this.mainUser).Customer.loginId);
      formData.append("type", "back");

      $.ajax({
        url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg',
        header: {
		     		'content-type': 'application/json', //自定义请求头信息
	 		}, 
        contentType: 'application/json',
	 	  	dataType:'JSON',
        type: 'POST', //GET
        data: formData,
        contentType: false,
         processData: false,
        beforeSend: function (xhr) {},
        success: (res) => {
          console.log(res)
          if (res.ResultCD == "I001") {         
            that.$refs.idcardBack.src = lookImgSrc; // 我要赋值data里面的 我上传的图片
            console.log( that.$refs.idcardBack.src,3333)
          }else {
            alert(res.ErrorMsg);
          }
        },
        error: (ros) => {
          alert(ros.ErrorMsg);
        }
      })
    },

        
    // 手持身份证
    changeFree() {
        let that = this;
      let imgFile = $(that.$el).find("#fileFree")[0].files[0]; //取到上传的图片
      console.log($(that.$el).find("#fileFree")[0].files, "正面"); //由打印的可以看到，图片信息就在files[0]里面
      let formData = new FormData(); //通过formdata上传
        var lookImgSrc = URL.createObjectURL(imgFile);
      formData.append("imgFile", imgFile);
      formData.append("loginId", 1);
      formData.append("type", "hand");
      $.ajax({
        url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg',
        header: {
		     		'content-type': 'application/json', //自定义请求头信息
	 		}, 
        contentType: 'application/json',
	 	  	dataType:'JSON',
        type: 'POST', //GET
        data: formData,
        contentType: false,
         processData: false,
        beforeSend: function (xhr) {},
        success: (res) => {
          console.log(res)
          if (res.ResultCD == "I001") {         
            that.$refs.idcardHand.src = lookImgSrc; // 我要赋值data里面的 我上传的图片
           
          }else {
            alert(res.ErrorMsg);
          }
        },
        error: (ros) => {
          alert(ros.ErrorMsg);
        }
      })
    },
    // 提交
    tijiao(){
      this.dialogAuthentication = false
    },

    Authentication() {
      this.dialogAuthentication = true;
    },
    bangding() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 账户信息
    information() {
      let data = {
        guid: this.$allId.guid,
        loginId: this.user.Customer.loginId,
        sessionId: this.user.SessionId
      };
      accountGet(data).then(res => {
        console.log(res.data, 444444);
        if (res.data.ResultCD == "I001") {
          this.assGet = res.data;
        } else {
          this.$message.error(res.data.ErrorMsg);
        }
      });
    }
    //   // 点击发送短信
    //  getCode() {
    //     var TIME_COUNT = 60;
    //     let data = {
    //       guid: this.$allId.guid,
    //       loginId: this.user.Customer.loginId,
    //       sessionId:this.user.SessionId
    //     };

    //     bindingCode(data).then(res => {
    //          console.log(res,111)
    //      if(res.data.ResultCD=="I001"){
    //         if (!this.timer) {
    //           this.count = TIME_COUNT;
    //           this.show = false;

    //           this.timer = setInterval(() => {
    //             if (this.count > 0 && this.count <= TIME_COUNT) {
    //               this.count--;
    //             } else {
    //               this.show = true;
    //               clearInterval(this.timer);
    //               this.timer = null;
    //             }
    //           }, 1000);
    //         }
    //       } else {
    //         this.$message.error(res.data.ErrorMsg);
    //       }
    //     });
    //   },
  }
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.modal {
  display: block;
  /* 默认隐藏 */
  /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  /*设置弹窗位置*/
  padding-top: 15%;
  padding-bottom: 100px;
  /*浮在全屏上*/
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  /* 弹窗内容 */

  .modal-content {
    /*弹窗背景色设置*/
    background-color: #fefefe;
    margin: auto;
    width: 20%;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    padding-bottom: 30px;
    position: relative;
    padding: 0 30px 30px;
    .loss {
      padding-top: 46px;
      padding-bottom: 29px;
      border-bottom: 1px solid #f1f1f1;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(45, 47, 86, 1);
      text-align: center;
      margin: 0 auto;
    }
    div:nth-child(2) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(45, 47, 86, 1);
      margin-top: 40px;
    }
    .login {
      margin-top: 53px;

      button {
        width: 100%;
        height: 35px;
        background: rgba(45, 47, 86, 1);
        border-radius: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(45, 47, 86, 1);
        outline: none;
      }
    }
  }
}
.accountMain {
  width: 100%;
  background: #fff;
}

.account {
  width: 1200px;
  margin: 0px auto;
  padding: 50px 0px;
  box-sizing: border-box;
  .accountTitle {
    width: 100%;
    box-sizing: border-box;
    margin: 50px;
    box-sizing: border-box;
    img {
      width: 4%;
    }
    .accountTitle_r {
      display: inline-block;
      width: 90%;
      padding-left: 20px;
      p {
        line-height: 25px;
        span {
          font-size: 25px;
        }
      }
    }
  }
  // 重置密码
  .onetwo {
    height: 100%;
    border: 1px solid #f7f7fb;
    padding-bottom: 5px;
    .forget {
      display: flex;
      border-bottom: 1px solid #f7f7fb;
      padding-bottom: 5px;
      padding-top: 5px;
      div:nth-child(1) {
        width: 4px;
        height: 23px;
        background: rgba(104, 129, 255, 1);
        border-radius: 2px;
      }
      div:nth-child(2) {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(45, 47, 86, 1);
        margin-left: 10px;
      }
    }
    .xiugai {
      display: flex;
      width: 95%;
      margin: 20px auto;
      justify-content: space-between;
      .xiugai-one {
        display: flex;

        div:nth-child(1) img {
          width: 40px;
          height: 33px;
        }
        div:nth-child(2) {
          p:nth-child(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(45, 47, 86, 1);
            margin-left: 20px;
          }
          p:nth-child(2) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(186, 197, 203, 1);
            margin-top: 9px;
            margin-left: 20px;
          }
        }
      }
      // 绑定
      .xiugai-two {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(104, 129, 255, 1);
        margin-top: 9px;
      }
    }
  }
}
.twoode {
  div:nth-child(1) {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(186, 197, 203, 1);
    margin-top: 10px;
  }
}
.onparin {
  width: 100%;
  margin-top: 20px;
}
// / 上传身份证
.uploaderFiels {
  display: flex;
  justify-content: space-around;
  .fiels {
    .file-style {
      position: relative;
      margin: 0 auto;
      width: 220px;
      height: 139px;
      overflow: hidden;
      text-decoration: none;
      text-indent: 0;
      line-height: 20px;
      img {
        display: block;
        width: 200px;
        height: 139px;
        margin: 0 auto;
      }
      input {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;
        opacity: 0;
      }
    }
    .text {
      margin: 25px 0;
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>